<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css">
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
        body {
            background: rgba(90, 194, 255, 1);
        }

        .vueApp {
            padding-bottom: 10px;
        }

        .container {
            margin: 15px;
            padding: 0 15px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 4px 10px 0px rgba(0, 135, 214, 0.37);
            border-radius: 10px;
        }

        .bor {
            height: 1px;
            background: rgb(212, 212, 212);
            transform: translateY(0.5);
        }

        .row {
            height: 50px;
        }

        .key {
            font-size: 15px;
            font-weight: 500;
            color: rgba(25, 25, 25, 1);
        }

        .value {
            text-align: right;
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
        }

        .value::placeholder {
            font-size: 15px;
            font-weight: 400;
            color: rgba(191, 191, 191, 1);
        }

        .btn {
            width: 210px;
            height: 46px;
            background: url("../../image/ui/btn.png");
            background-size: 100% 100%;
            margin: 45px auto 0 auto;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            color: rgba(124, 69, 0, 0.5);
            line-height: 44px;
            box-shadow: 0px 5px 7px 0px rgba(11, 126, 193, 0.53);
            border-radius: 22px;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="container">
            <div class="row" data-flex="cross:center" id="tel_login">
                <div class="key">绑定手机号</div>
                <input class="value" data-flex-box="1" spellcheck="false" type="tel"
                    oninput="value=value.replace(/[^\d0-9]/g,'')" v-model="info.phone" maxlength="11"
                    data-type="_telphone" data-verify="true" data-null="true" data-regular="true" name="手机号"
                    placeholder="请输入绑定的手机号码">
            </div>
            <div class="bor"></div>
            <div class="row" data-flex="cross:center">
                <div class="key">支付宝账号</div>
                <input class="value" v-model="info.alipayAccount" type="text" data-flex-box="1" placeholder="请输入支付宝账户">
            </div>
            <div class="bor"></div>
            <div class="row" data-flex="cross:center">
                <div class="key">支付宝姓名</div>
                <input class="value" v-model="info.userName" type="text" data-flex-box="1" placeholder="请输入账户姓名">
            </div>
        </div>
        <div class="btn" @click="submitFn()">
            提交
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/service/service-verify.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm, pageParam;
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        pageParam = api.pageParam;
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        fnInit();
    };
    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                info: {
                    'entityName': 'withDrawAccount',
                    'accountType': '2',
                    'userName': pageParam.userName || '',
                    'phone': pageParam.phone || '',
                    'alipayAccount': pageParam.alipayAccount || ''
                }
            }
        });
    }

    function submitFn() {
        // 如果用户有未填项
        if(vm.info.phone === '' || vm.info.alipayAccount === '' || vm.info.userName === '') {
            fnToast('不能有未填选项');
            return;
        }
        // 如果用户未改动
        if (pageParam.userName !== '' && vm.info.userName === pageParam.userName && vm.info.phone === pageParam.phone && vm.info.alipayAccount === pageParam.alipayAccount) {
            return;
        }
        if (fnVerify("tel_login")) {
            var params = vm.info;
            var url = 'common/insert';
            if (pageParam.id) {
                Object.assign(params, {
                    'id': pageParam.id
                });
                url = 'common/updateById';
            }
            var callback = function (data) {
                fnToast('提交成功');
                api.execScript({
                    name: pageParam.winName,
                    frameName: pageParam.frmName,
                    script: 'getPageData();'
                })
                api.closeWin();
            };
            POST(url, params, callback);
        }
    }
</script>

</html>